<template>
  <div class="app-container" v-loading="loading">
    <div class="schemainfo">
      <div class="top-operate">
        <div class="page-title">
          场景字段配置
        </div>
        <div class="button-box">
          <template v-if="isEdit">
            <el-button style="height: 46px !important;
              padding: 0px 30px;
              line-height: 46px;
              font-size: 16px;
              width: 90px !important;" size="medium" @click.stop="isEdit = false">取消</el-button>
            <el-button style="height: 46px !important;
              padding: 0px 30px;
              line-height: 46px;
              font-size: 16px;
              width: 90px !important;" size="medium" type="primary" @click.stop="saveForm">保存</el-button>
          </template>
          <template v-else>
            <el-button style="height: 46px !important;
              padding: 0px 30px;
              line-height: 46px;
              font-size: 16px;
              width: 90px !important;" size="medium" type="primary" @click.stop="isEdit = true">编辑</el-button>
          </template>
        </div>
      </div>
      <div class="form-box">
        <div class="card-title">
          基本信息
        </div>
        <el-form ref="form" label-position="left" :model="form" label-width="110px" class="header-form">
          <el-form-item label="源系统" class="header-form-item" prop="sysObjName1">
            <el-input v-model="form.sourceSys" disabled placeholder="请输入源系统"></el-input>
          </el-form-item>
          <el-form-item label="目标系统" class="header-form-item" prop="sysObjName2">
            <el-input v-model="form.targetSys" disabled placeholder="请输入目标系统"></el-input>
          </el-form-item>
          <el-form-item label="源业务对象" class="header-form-item" prop="sysObjName1">
            <el-input v-model="form.sysObjName1" disabled placeholder="请输入源业务对象"></el-input>
          </el-form-item>
          <el-form-item label="目标业务对象" class="header-form-item" prop="sysObjName2">
            <el-input v-model="form.sysObjName2" disabled placeholder="请输入目标业务对象"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="page-card">
      <div class="button-group-contianer">
        <div class="button-group-box">
          <div class="active">字段映射</div>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%; margin-top: 17px" border>
          <el-table-column label="目标字段列名" prop="syncerColumnName" min-width="180px" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ row.receiverColumnName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标字段描述" min-width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.receiverColumnComment }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标物理类型" prop="syncerColumnType" min-width="180px" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ row.receiverColumnType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标Java类型" min-width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.receiverJavaType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标java属性" min-width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.receiverJavaField }}</span>
            </template>
          </el-table-column>

          <el-table-column label="源字段列名" prop="syncerColumnName" min-width="180px">
            <template slot-scope="{ row }">
              <div class="closeable" @click.stop="handleSelectColumn(row)">
                <el-input :disabled="!isEdit" v-model="row.syncerColumnName" suffix-icon="el-icon-more el-input__icon">
                  <i slot="suffix" style="position: absolute;
                        right: -16px;
                        top: -18px;" class="el-input__icon el-icon-error" v-if="isEdit && row.syncerColumnName"
                    @click.stop="removeMapping(row)" />
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="源字段描述" min-width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.syncerColumnComment }}</span>
            </template>
          </el-table-column>
          <el-table-column label="源物理类型" prop="syncerColumnType" min-width="180px" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <span>{{ row.syncerColumnType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="源Java类型" min-width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.syncerJavaType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="源java属性" min-width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.syncerJavaField }}</span>
            </template>
          </el-table-column>
        </el-table>
        <SelectColumnDialog v-if="openSelectColumnDialog" :show.sync="openSelectColumnDialog" label="列名"
          formTitle="字段映射匹配" primaryKey="id" :businessObjectId="currentReceiverObjectId" :receiverId="currentReceiverId"
          @closeSelectColumn="closeSelectColumn" showField="columnComment" @selectDialogItem="selectDialogItem">
        </SelectColumnDialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getSceneConfigDetail } from '@/api/interfaceConfig/sceneConfig/sceneConfig'
import SelectColumnDialog from "@/views/interfaceConfig/sceneConfig/components/SelectColumnDialog";
import { save } from "@/api/interfaceConfig/sceneConfig/fieldMapping";

export default {
  name: "SceneFieldSetting",
  components: { SelectColumnDialog },
  data() {
    return {
      form: {
        sourceSys: '',
        targetSys: '',
        sysObjName1: '',
        sysObjName2: ''
      },
      tableData: [],
      openSelectColumnDialog: false,
      currentReceiverObjectId: undefined,
      currentReceiverId: undefined,
      isEdit: false,
      fieldMappingData: [],
      loading: false
    }
  },
  computed: {
    id() {
      return this.$route.query && this.$route.query.id
    }
  },
  created() {
    if (!this.id) {
      this.loading = true
      this.$modal.msgError('检测不到场景~')
      return
    }
    this.getSceneConfigDetail()
  },
  methods: {
    handleSelectColumn(row) {
      //编辑模式才打开弹窗
      if (this.isEdit) {
        this.currentReceiverObjectId = this.form.sysObjId1
        this.currentReceiverId = row.receiverId
        this.openSelectColumnDialog = true
      }
    },
    closeSelectColumn() {
      this.currentReceiverObjectId = undefined
      this.openSelectColumnDialog = false
    },
    //获取场景详情
    async getSceneConfigDetail() {
      let { data } = await getSceneConfigDetail(this.id)
      if (data.sceneConfig.integrationDirection === '02') {
        //金蝶同步到本系统
        this.form.sourceSys = '金蝶云星空'
        this.form.targetSys = '序列号追溯系统'
        this.form.sysObjName1 = data.sceneConfig.sysObjName1
        this.form.sysObjName2 = data.sceneConfig.sysObjName2
        this.form.sysObjId1 = data.sceneConfig.sysObjId1
        this.form.sysObjId2 = data.sceneConfig.sysObjId2
      } else {
        this.form.sourceSys = '序列号追溯系统'
        this.form.targetSys = '金蝶云星空'
        this.form.sysObjName1 = data.sceneConfig.sysObjName2
        this.form.sysObjName2 = data.sceneConfig.sysObjName1
        this.form.sysObjId2 = data.sceneConfig.sysObjId1
        this.form.sysObjId1 = data.sceneConfig.sysObjId2
      }
      this.tableData = data.fieldMappingVos || []
    },
    selectDialogItem(receiverId, row) {
      let { id, columnName, columnComment, columnType, javaField, javaType } = row;
      // 找到tableData中receiverId为receiverId的元素
      const targetIndex = this.tableData.findIndex(item => item.receiverId === receiverId);
      //数组fieldMappingData移除为receiverId的元素
      const mappingIndex = this.fieldMappingData.findIndex(item => item.receiverId === receiverId);
      if (mappingIndex !== -1) {
        this.fieldMappingData.splice(mappingIndex, 1)
      }

      if (targetIndex !== -1) {
        // 更新tableData中对应的元素属性
        this.tableData[targetIndex].syncerId = id;
        this.tableData[targetIndex].syncerColumnName = columnName;
        this.tableData[targetIndex].syncerColumnComment = columnComment;
        this.tableData[targetIndex].syncerColumnType = columnType;
        this.tableData[targetIndex].syncerJavaField = javaField;
        this.tableData[targetIndex].syncerJavaType = javaType;

        // 将receiverId和id添加到fieldMappingData数组中
        this.fieldMappingData.push({ syncerId: id, receiverId: receiverId })
      }
    },
    //点击x移除映射
    removeMapping(row) {
      const targetIndex = this.tableData.findIndex(item => item.receiverId === row.receiverId);
      //数组fieldMappingData移除为receiverId的元素
      const mappingIndex = this.fieldMappingData.findIndex(item => item.receiverId === row.receiverId);
      if (mappingIndex !== -1) {
        this.fieldMappingData.splice(mappingIndex, 1)
      }

      if (targetIndex !== -1) {
        // 更新tableData中对应的元素属性
        this.tableData[targetIndex].syncerId = undefined;
        this.tableData[targetIndex].syncerColumnName = undefined;
        this.tableData[targetIndex].syncerColumnComment = undefined;
        this.tableData[targetIndex].syncerColumnType = undefined;
        this.tableData[targetIndex].syncerJavaField = undefined;
        this.tableData[targetIndex].syncerJavaType = undefined;
      }
    },
    //保存映射记录
    async saveForm() {
      //判断是否有场景ID
      if (!this.id) {
        this.$modal.msgError('无场景信息，无法保存')
        return
      }
      //判断是否有映射信息
      if (this.fieldMappingData.length === 0) {
        this.$modal.msgError('未选择字段映射关系')
        return
      }
      //提交表单
      let resp = await save({
        sceneId: this.id,
        fieldMappingList: this.fieldMappingData
      })
      if (resp.code === 200) {
        this.$modal.msgSuccess('保存成功')
        this.isEdit = false
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .schemainfo {
    border: 1px solid #d5d4d4;
    padding: 10px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);

    .top-operate {
      background: #fff;
      border: none;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .page-title {
        line-height: 40px;
        color: #092048;
        font-size: 24px;
        font-weight: 500;

        .button-box {
          display: flex;
        }
      }
    }
  }

  .el-table {
    .closeable {
      ::v-deep {
        .el-input {
          .el-input__suffix {
            border-left: 1px solid #ccc;
            padding-left: 4px;

            .el-icon-error {
              display: none;
            }
          }
        }

        .el-input:hover {
          .el-icon-error {
            display: block;
          }
        }
      }

      .el-input__suffix:hover {
        cursor: pointer;
      }
    }

    ::v-deep {
      .cell {
        overflow: visible !important;
      }
    }
  }

  .form-box {
    ::v-deep {
      .el-form {
        .el-form-item {
          width: 480px;
          line-height: 40px;
          margin: 10px 0;
          padding: 0 20px;

          .el-form-item__label {
            font-size: 16px;
            font-weight: 400;
            color: #092048;
          }

          .el-form-item__content .el-input .el-input__inner {
            width: 320px;
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }

  .page-card {
    border: 1px solid #d5d4d4;
    padding: 20px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-top: 10px;
  }

  .page-card:last-child {
    border: none;
  }

  .button-group-contianer {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .switch-icon {
      cursor: pointer;
      margin-right: 5px;
      font-size: 20px;
    }

    .button-group-box {
      margin-bottom: 0;

      .active {
        border-color: #1890ff !important;
        color: #1890ff !important;
        z-index: 9;
      }
    }
  }
}
</style>
